<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距合并问题</title>
		<style>
			/* 父级元素限制：宽高、边框 */
			div.parent{
				width: 300px;
				height: 300px;
				/* 填充：没有空间 */
				bor der: 1px solid red;
				margin-bottom: 100px;
				/* 推荐：找到父级元素加溢出隐藏，父级元素隐藏，余处空间，正常加外边距 */
				over flow: hidden;
				/* 建议：找到父级元素，有空间 */
				bor der: 1px solid transparent;
				/* 不推荐：内边距占空间，找到发生问题的位置 */
				padding-top: 1px;
			}
			div.son{
				width: 100px;
				height: 100px;
				bor der: 1px solid red;
				margin-top: 110px;
			}
			/* 以上【外边距垂直合并】2.【内部】外边距垂直会合并，最大值为准 
			                        解决方案：①溢出隐藏，转换为块状上下文结构
									          找到父元素添加overflow: hidden或者auto
											 ②加一个像素，透明边框，具体的位置内边距
											  找到父元素添加：border或者padding: 1px
			*/
			/* 以上【外边距垂直合并】1.外部边距垂直会合并，以最大值为准 
			                      建议：最小的外边距删掉
			*/
		   div.parent{
			   width: 300px;
			   height: 300px;
			   /*填充*/
			   background-color: #fffed4;
			   /*上外边距：100px*/
			   margin-top: 100px;
		   }
		   div.son{
			   width: 100px;
			   height: 100px;
			   background-color: #d9ffd0;
			   /*上外边距：40px*/
			   margin-top: 40px;
		   }
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son"></div>
		</div>
	</body>
</html>